﻿@model MobileWebsiteGenerator.Models.MainViewModel
<style type="text/css">

/* Let's get this party started */
::-webkit-scrollbar {
    width: 5px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(0,0,0,0.4); 
}
.pages td
{
 border-bottom:1px solid #fff;
 background-color:#1675c5;
}
.pages a,h5
{
    font-size:14px;
    color:#fff;
    font-weight:600;
}
.pages a:hover
{
  text-decoration:underline;
  color:#000;
}
    #PageContainer
    {
       background-color: @Model.MyTheme.backgroundColor;
   background-image:url('@Url.Content("~/uploads/" + Model.MyTheme.backgroundImage)');
         
        margin-top: 10px;
        padding: 0px;
         width: 200px;
         margin-right:25px;
         margin-top:18px;
       

    
       position:relative;
    }
    #PageContainer span
    {
        line-height: 20px;
        letter-spacing: 1px;
      
    }
    #header
    {
         background-color: @Model.MyTheme.Headercolor;
        height: 40px;
        vertical-align:top;  
        margin-top:-15px;
        
      
        color: @Model.MyTheme.HeadertextColor;
        background-image: url('@Url.Content("~/uploads/" + Model.MyTheme.HeaderImage)');
        text-align: center;
    }
    .footer
    { 
           height: 55px;
           text-align: center;
           vertical-align:bottom;
           color:@Model.MyTheme.FootertextColor;
           margin-top:7px;
    
        background-color: Black;
    }
    ul.metroui-list
    {
        list-style: none;
        padding: 0;
        margin: 3;
    }
    #content1
    {

height:200px;
width:100%;
overflow-y: scroll;


    }
ul.metroui-list li { 

   width:@Model.MyTheme.Size%;
	margin-top: 2px;
	margin-bottom: 2px;
	background-color: #1675c5;
    font-family:Segoe UI;
    padding:5px 5px 5px 5px;
	color: #fff;
	cursor: pointer;
	text-decoration:none;
	text-align:center;
	color:#fff;
	font-size:15px;
    font-style:
			border-radius:3px;
              background-image:url('@Url.Content("~/uploads/" + Model.MyTheme.ButtonPicture)');
                border: 2px solid @Model.MyTheme.Border;
}
a,a:active,a:visited
{
	text-decoration:none;
	color:#FFF;
}

ul.metroui-list li:hover {
	background-color: #CCC;
    color:#FFF;
}

li.metroui-list-selected {
	background-color:#4e534b !important;
	color: #fff;
}
</style>
<style type="text/css">
    a#vlb
    {
        display: none;
    }
</style>
<br />
<table id="mobileslider" style="margin-right: 0px;" width="250" border="0" cellpadding="0"
    cellspacing="0">
    <tr>
        <td colspan="3">
            <img style="margin-bottom: -15px;" src="../../Content/phone/Mobile_01.png" width="250"
                height="77" alt="">
        </td>
    </tr>
    <tr>
        <td>
            <img style="margin-left: 0px;" src="../../Content/phone/Mobile_02.png" width="25"
                height="310" alt="">
        </td>
        <td>
            <div id="PageContainer">
                @if (MobileWebsiteGenerator.MvcApplication._MainCustomer.MyTheme.Isheader == true)
                {
                    <div style="top: 0px; width: auto; position: static;" id="header">
                        <h4>@Model.MyTheme.HeaderText</h4>
                    </div>
                }
                

                

                <div id="content1">


                  <div style=" background-image:url('@Url.Content("~/uploads/" + Model.MyTheme.BannerImage)'); height:25px; ">
                    </div>
                    <div>
                        <h4>@Model.MyTheme.Bannertext</h4>
                    </div>
                  
                    @Html.Partial("_Pages", Model)
                </div>
                @if (MobileWebsiteGenerator.MvcApplication._MainCustomer.MyTheme.IsFooter == true)
                {
                    <div class="footer">
                        <h4>
                            @Model.MyTheme.Footertext</h4>
                        <ul id="social">
                            <li><a href="@Model.MyTheme.facebookurl">
                                <img src="@Url.Content("~/images/facebook.png")" height="20" width="20" alt="facebook" title="like us"/></a></li>
                            <li><a href="@Model.MyTheme.twitterurl">
                                <img src="@Url.Content("~/images/twitter.png")" height="20" width="20" alt="Twitter" title="follow us" /></a></li>
                            <li><a href="@Model.MyTheme.gplusurl">
                                <img src="@Url.Content("~/images/gplus.png")" height="20" width="20" alt="Google Plus" title="join us"/></a></li>
                        </ul>
                    </div>
                }
            </div>
        
        </td>
        <td>
            <img style="margin-left: -25px; margin-top: -5px;" src="../../Content/phone/Mobile_04.png"
                width="25" height="310" alt="">
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <img style="margin-top: -10px;" src="../../Content/phone/Mobile_05.png" width="250"
                height="84" alt="">
        </td>
    </tr>
</table>


<style type="text/css">
    #social li
    {
        float: right;
    }
</style>
